<template>
  <el-card :style="`height:${view.height - 140}px;`">
    <el-row class="filter-row" style="margin-bottom: 20px" :gutter="20">
      <!-- 搜索框：样本名称 -->
      <el-col :span="6">
        <el-input
          style="width: 80%"
          v-model="searchQuery"
          placeholder="搜索样本名称"
          clearable
        ></el-input>
        <el-button
          style="margin: 0 0 0 10px"
          @click="handleSearch"
          type="primary"
          size=""
          >搜索</el-button
        >
      </el-col>

      <!-- 搜索框：样本类型 -->
      <el-col :span="6" >
        <el-select
          style="width: 80%"
          v-model="selectedSampleType"
          placeholder="选择样本类型"
          @change="handleFilterChange"
          clearable
        >
          <el-option
            v-for="type in modelTypes"
            :key="type"
            :label="type"
            :value="type"
          ></el-option>
        </el-select>
        <el-button
          style="margin: 0 0 0 10px"
          @click="handleFilterChange"
          type="primary"
          size=""
          >筛选
          </el-button>
      </el-col>

      <!-- 搜索框：标签数量 -->
      <el-col :span="6" >
        <el-input
          style="width: 80%"
          v-model="searchTagCount"
          placeholder="标签数量"
          clearable
        ></el-input>
        <el-button
          style="margin: 0 0 0 10px"
          @click="handleSearch"
          type="primary"
          size=""
          >搜索</el-button
        >
      </el-col>
       <!-- 搜索框：标签数量 -->
       <el-col :span="6" >
       
      </el-col>

      <!-- 搜索框：样本数量 -->
      <el-col :span="6" style="margin-top: 20px;" >
        <el-input
          style="width: 80%"
          v-model="searchSampleCount"
          placeholder="样本数量"
          clearable
        ></el-input>
        <el-button
          style="margin: 0 0 0 10px"
          @click="handleSearch"
          type="primary"
          size=""
          >搜索</el-button
        >
      </el-col>

      <!-- 搜索框：创建时间 -->
      <el-col :span="6"  style="margin-top: 20px;">
        <el-date-picker style="width: 80%"
          v-model="searchDate"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleSearch"
          clearable
        />
        <el-button  style="margin: 0 0 0 10px" @click="handleSearch" type="primary" size=""
          >搜索</el-button
        >
      </el-col>
    </el-row>

    <!-- 样本表格 -->
    <el-table
      :data="filteredSamples"
      style="width: 100%"
      :border="true"
      :style="`height:${view.height - 340}px;margin:0 0 20px`"
      size="small"
    >
      <el-table-column
        label="样本名称"
        prop="name"
        width="150"
      ></el-table-column>
      <el-table-column
        label="样本类型"
        prop="type"
        width="150"
      ></el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column
        label="标签数量"
        prop="tagCount"
        width="150"
      ></el-table-column>
      <el-table-column
        label="样本尺寸"
        prop="size"
        width="150"
      ></el-table-column>
      <el-table-column
        label="样本数量"
        prop="sampleCount"
        width="150"
      ></el-table-column>
      <el-table-column
        label="创建者"
        prop="creator"
        width="150"
      ></el-table-column>
      <el-table-column
        label="样本描述"
        prop="description"
        width="200"
      ></el-table-column>
      <el-table-column label="状态" prop="status" width="150"></el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button size="small" type="primary" plain @click="viewSample(row)"
            >查看</el-button
          >
          <el-button size="small" type="warning" plain @click="viewDetails(row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-if="filteredSamples.length > 0"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="filteredSamples.length"
      @current-change="handlePageChange"
      layout="total, prev, pager, next, jumper"
    ></el-pagination>
  </el-card>
</template>

<script setup>
import { reactive, ref, computed } from "vue";

// Managing the window height
const view = reactive({
  height: window.innerHeight,
});

// 模型类型列表（与样本类型一致）
const modelTypes = ["变化检测", "目标检测", "地物分类"];

// 样本数据初始化
const samples = ref([
  {
    id: 1,
    name: "样本1",
    type: "变化检测",
    createTime: "2025-01-01",
    tagCount: 5,
    size: "10MB",
    sampleCount: 100,
    creator: "张三",
    description: "这是一个描述",
    status: "待处理",
  },
  {
    id: 2,
    name: "样本2",
    type: "目标检测",
    createTime: "2025-01-02",
    tagCount: 10,
    size: "20MB",
    sampleCount: 200,
    creator: "李四",
    description: "另一个描述",
    status: "处理中",
  },
  {
    id: 3,
    name: "样本3",
    type: "地物分类",
    createTime: "2025-01-03",
    tagCount: 7,
    size: "15MB",
    sampleCount: 300,
    creator: "王五",
    description: "这是第三个样本描述",
    status: "已完成",
  },
  {
    id: 4,
    name: "样本4",
    type: "变化检测",
    createTime: "2025-01-04",
    tagCount: 3,
    size: "25MB",
    sampleCount: 400,
    creator: "赵六",
    description: "描述4",
    status: "待处理",
  },
]);

// 搜索框的状态
const searchQuery = ref("");
const selectedSampleType = ref("");
const searchTagCount = ref("");
const searchSampleCount = ref("");
const searchDate = ref([null, null]);
const currentPage = ref(1);
const pageSize = ref(5);

// 计算过滤后的样本
const filteredSamples = computed(() => {
  let filtered = samples.value;

  if (selectedSampleType.value) {
    filtered = filtered.filter(
      (sample) => sample.type === selectedSampleType.value
    );
  }

  if (searchQuery.value) {
    filtered = filtered.filter((sample) =>
      sample.name.includes(searchQuery.value)
    );
  }

  if (searchTagCount.value) {
    filtered = filtered.filter(
      (sample) => sample.tagCount === Number(searchTagCount.value)
    );
  }

  if (searchSampleCount.value) {
    filtered = filtered.filter(
      (sample) => sample.sampleCount === Number(searchSampleCount.value)
    );
  }

  if (searchDate.value[0] && searchDate.value[1]) {
    const startDate = new Date(searchDate.value[0]);
    const endDate = new Date(searchDate.value[1]);
    filtered = filtered.filter((sample) => {
      const sampleDate = new Date(sample.createTime);
      return sampleDate >= startDate && sampleDate <= endDate;
    });
  }

  return filtered;
});

// 处理筛选变化
const handleFilterChange = () => {
  currentPage.value = 1; // Reset to first page when filter changes
};

// 处理搜索输入
const handleSearch = () => {
  currentPage.value = 1; // Reset to first page when search changes
};

// 处理分页变化
const handlePageChange = (page) => {
  currentPage.value = page;
};

// 查看样本
const viewSample = (sample) => {
  console.log("查看样本:", sample);
};

// 查看详情
const viewDetails = (sample) => {
  console.log("查看详情:", sample);
};
</script>

<style lang="scss" scoped>
/* 样式可以根据需求修改 */
</style>
